<script setup>
import { ref } from "vue";
import { getPlayListdynamic, getPlayListLike } from "../../apis/music";
import emitter from "../../utils/eventBus";
import { RmMessage } from "../../utils/RmMessage";
import { formatDate } from "../../utils/tool";
const props = defineProps(["playList", "albumInfo", "isPlayLike"]);

const handlePlay = () => {
  emitter.emit("playFirstMusic");
};
const handleListLike = (type, id) => {
  getPlayListLike(type, id).then((res) => {
    console.log(res);
    if (res.code == 200) {
      if (type == 1) {
        RmMessage.success("收藏歌单成功");
      } else {
        RmMessage.success("取消收藏成功");
      }
    }
  });
};
</script>

<template>
  <el-container>
    <template v-if="playList">
      <el-header v-if="playList" height="200px">
        <div class="wrap">
          <div class="img" v-if="playList.coverImgUrl">
            <!-- <img :src="playList.coverImgUrl" alt="" /> -->
            <el-image
              :preview-src-list="[playList.coverImgUrl + `${'?param=500y500'}`]"
              :src="playList.coverImgUrl + `${'?param=500y500'}`"
              fit="cover"
              lazy
            >
              <template #placeholder>
                <div class="image-slot">
                  Loading<span class="dot">...</span>
                </div>
              </template>
            </el-image>
          </div>
          <div class="title">
            <div class="head-name">
              <div class="name">{{ playList.name }}</div>
            </div>
            <!-- 作者信息 -->
            <div class="creator">
              <!-- 作者名 -->
              <span> Playlist by {{ playList.creator.nickname }} </span>
              <!-- 创建时间 -->
              <div>歌单于 {{ formatDate(playList.createTime) }} 创建</div>
            </div>
            <div class="intro">
              <div>
                {{ playList.description }}
              </div>
            </div>
            <div class="button">
              <button
                @click="handlePlay"
                type="primary"
                class="iconfont icon-24gf-play play"
              >
                播放</button
              >
              <i
                v-if="!isPlayLike"
                @click="handleListLike(1, playList.id)"
                class="iconfont icon-aixin1"
              ></i>
              <i
                v-if="isPlayLike"
                @click="handleListLike(2, playList.id)"
                class="iconfont icon-aixin"
              ></i>
            </div>
          </div>
        </div>
      </el-header>
      <el-skeleton v-else style="width: 240px; padding: 20px">
        <template #template>
          <el-skeleton-item
            variant="image"
            style="width: 200px; height: 200px"
          />
          <div style="padding: 14px">
            <el-skeleton-item variant="p" style="width: 80%" />
            <div
              style="
                display: flex;
                align-items: center;
                justify-items: space-between;
              "
            >
              <el-skeleton-item variant="text" style="margin-right: 16px" />
              <el-skeleton-item variant="text" style="width: 100%" />
            </div>
          </div>
        </template>
      </el-skeleton>
    </template>
    <template v-if="albumInfo">
      <el-header v-if="albumInfo" height="200px">
        <div class="wrap">
          <div class="img">
            <el-image
              :preview-src-list="[albumInfo.picUrl + `${'?param=500y500'}`]"
              :src="albumInfo.picUrl + `${'?param=500y500'}`"
              fit="cover"
              lazy
            >
              <template #placeholder>
                <div class="image-slot">
                  Loading<span class="dot">...</span>
                </div>
              </template>
            </el-image>
          </div>
          <div class="title">
            <div class="head-name">
              <div class="name">{{ albumInfo.name }}</div>
            </div>
            <!-- 作者信息 -->
            <div class="creator">
              <!-- 作者名 -->
              <!-- <span> Playlist by {{ albumInfo.artist.name }} </span> -->
              <!-- 创建时间 -->
              <div>专辑发行于 {{ formatDate(albumInfo.publishTime) }}</div>
            </div>
            <div class="intro">
              <div>
                {{ albumInfo.description }}
              </div>
            </div>
            <div class="button">
              <button
                @click="handlePlay"
                type="primary"
                class="iconfont icon-24gf-play play"
              >
                播放</button
              >
              <i class="iconfont icon-aixin1"></i>
              <i class="iconfont icon-aixin"></i>
            </div>
          </div>
        </div>
      </el-header>
      <el-skeleton v-else style="width: 240px; padding: 20px">
        <template #template>
          <el-skeleton-item
            variant="image"
            style="width: 200px; height: 200px"
          />
          <div style="padding: 14px">
            <el-skeleton-item variant="p" style="width: 80%" />
            <div
              style="
                display: flex;
                align-items: center;
                justify-items: space-between;
              "
            >
              <el-skeleton-item variant="text" style="margin-right: 16px" />
              <el-skeleton-item variant="text" style="width: 100%" />
            </div>
          </div>
        </template>
      </el-skeleton>
    </template>
  </el-container>
</template>

<style scoped lang="scss">
.el-header {
  width: 100%;
  padding: 20px 30px;

  .wrap {
    display: flex;

    .img .el-image {
      width: 200px;
      height: 200px;
      /* height: 100%; */
      border-radius: 10px;
      // box-shadow: 10px 10px 10px transparent;
      box-shadow: 6px 4px 10px rgba(92, 112, 112, 0.774);
    }

    .title {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      margin-left: 40px;

      .name {
        display: inline-block;
        font-weight: 600;
        font-size: 35px;
      }

      .creator {
        span {
          font-size: 17px;
        }

        div {
          margin-top: 5px;
          font-size: 14px;
          color: rgb(121, 118, 118);
        }
      }

      .intro {
        div {
          width: 100%;
          text-align: justify;
          text-justify: inter-ideograph;
          font-size: 15px;
          height: 50px;
          color: rgb(121, 118, 118);
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          /*想省略几行就写几*/
          -webkit-box-orient: vertical;
        }
      }

      .button {
        display: flex;

        .play {
          background-color: #eaeffd;
          border: none;
          // color: #335eea;
          font-size: 17px;
          font-weight: 600;
        }

        .play:hover {
          // transform: scale(1.1);
        }

        i {
          margin-left: 30px;
          padding: 0 10px;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 18px;
          color: #333;

          &:hover {
            background-color: rgba(207, 207, 207, 0.466);
            transform: scale(1.1);
          }
        }
      }
    }
  }
}
button {
  position: relative;
  display: inline-block;
  padding: 8px 16px;
  text-align: center;
  font-size: 18px;
  letter-spacing: 1px;
  text-decoration: none;
  color: #725ac1;
  background: transparent;
  cursor: pointer;
  transition: ease-out 0.5s;
  border: 2px solid #725ac1;
  border-radius: 10px;
  box-shadow: inset 0 0 0 0 #725ac1;
}

button:hover {
  color: white;
  box-shadow: inset 0 -100px 0 0 #725ac1;
}

button:active {
  transform: scale(0.9);
}
</style>
